import {mapGetters} from 'vuex';
import {getAsync} from '@/utils/serviceHelper.js';

export default {
    data() {
        return {
            filters: {
                positionId: '',
                dimension: '',
                year: '',
                month: '',
                day: ''
            },
            dimensionOptions: [
                {id: 'year', name: '年'},
                {id: 'month', name: '月'},
                {id: 'day', name: '日'}
            ],
            riskPosition: [],
            riskPositionTotal: 0,
            riskPositionOpt: [],
            kLineChartOption: null,
            lineChartOption: null
        }
    },
    computed: {
        ...mapGetters([])
    },
    mounted() {
        this.initKLineChartOption();
        this.initLineChartOption();
        //执行下面的函数
        this.$store.dispatch('getRiskPositionListOptionsReturn', {page: 0, rows: 100}).then((res) => {
            this.riskPosition = [...res];
            this.riskPositionTotal = res.length;
            this.riskPositionOpt = this.riskPosition.slice(0, 6);
        });
    },
    methods: {

        handleCurrentChange(val) {
            this.riskPositionOpt = this.riskPosition.slice(val - 1, val - 1 + 6);
            if (this.filters.dimension == 'year') {
                this.handleSearchByYear();
            } else if (this.filters.dimension == 'month') {
                this.handleSearchByMonth('', true);
            } else if (this.filters.dimension == 'day') {
                this.handleSearchByDay('', true);
            }
        },
        handleReport: function () {
            this.$router.push('/rishTrendReportList');
        },
        handleSearchByDay: function (value, initValue) {
            if (!initValue) {
                this.riskPositionOpt = this.riskPosition.slice(0, 6);
            }
            Promise.all([
                this.$store.dispatch('getDayMeterList', {
                    positionId: this.riskPositionOpt[0].id,
                    year: this.filters.day.split('-')[0],
                    month: this.filters.day.split('-')[1],
                    day: this.filters.day.split('-')[2]
                }),
                this.$store.dispatch('getDayMeterList', {
                    positionId: this.riskPositionOpt[1].id,
                    year: this.filters.day.split('-')[0],
                    month: this.filters.day.split('-')[1],
                    day: this.filters.day.split('-')[2]
                }),
                this.$store.dispatch('getDayMeterList', {
                    positionId: this.riskPositionOpt[2].id,
                    year: this.filters.day.split('-')[0],
                    month: this.filters.day.split('-')[1],
                    day: this.filters.day.split('-')[2]
                }),
                this.$store.dispatch('getDayMeterList', {
                    positionId: this.riskPositionOpt[3].id,
                    year: this.filters.day.split('-')[0],
                    month: this.filters.day.split('-')[1],
                    day: this.filters.day.split('-')[2]
                }),
                this.$store.dispatch('getDayMeterList', {
                    positionId: this.riskPositionOpt[4].id,
                    year: this.filters.day.split('-')[0],
                    month: this.filters.day.split('-')[1],
                    day: this.filters.day.split('-')[2]
                }),
                this.$store.dispatch('getDayMeterList', {
                    positionId: this.riskPositionOpt[5].id,
                    year: this.filters.day.split('-')[0],
                    month: this.filters.day.split('-')[1],
                    day: this.filters.day.split('-')[2]
                })
            ]).then(res => {

                for (let riskPositionIndex in this.riskPositionOpt) {
                    //初始化K线图表
                    let chart = this.$echarts.init(document.getElementById(this.riskPositionOpt[riskPositionIndex].id));
                    //初始化折线图表配置
                    this.lineChartOption.title.text = this.riskPositionOpt[riskPositionIndex].riskPosition;
                    this.lineChartOption.series[0].data = res[riskPositionIndex].yData;
                    this.lineChartOption.xAxis.data = res[riskPositionIndex].xData;
                    if (this.lineChartOption && typeof this.lineChartOption === "object") {
                        chart.setOption(this.lineChartOption);
                    }
                }
            })
        },
        handleSearchByMonth: function (value, initValue) {
            if (!initValue) {
                this.riskPositionOpt = this.riskPosition.slice(0, 6);
            }
            Promise.all([
                this.$store.dispatch('getMonthMeterList', {
                    positionId: this.riskPositionOpt[0].id,
                    year: this.filters.month.split('-')[0],
                    month: this.filters.month.split('-')[1]
                }),
                this.$store.dispatch('getMonthMeterList', {
                    positionId: this.riskPositionOpt[1].id,
                    year: this.filters.month.split('-')[0],
                    month: this.filters.month.split('-')[1]
                }),
                this.$store.dispatch('getMonthMeterList', {
                    positionId: this.riskPositionOpt[2].id,
                    year: this.filters.month.split('-')[0],
                    month: this.filters.month.split('-')[1]
                }),
                this.$store.dispatch('getMonthMeterList', {
                    positionId: this.riskPositionOpt[3].id,
                    year: this.filters.month.split('-')[0],
                    month: this.filters.month.split('-')[1]
                }),
                this.$store.dispatch('getMonthMeterList', {
                    positionId: this.riskPositionOpt[4].id,
                    year: this.filters.month.split('-')[0],
                    month: this.filters.month.split('-')[1]
                }),
                this.$store.dispatch('getMonthMeterList', {
                    positionId: this.riskPositionOpt[5].id,
                    year: this.filters.month.split('-')[0],
                    month: this.filters.month.split('-')[1]
                })
            ]).then(res => {

                for (let riskPositionIndex in this.riskPositionOpt) {
                    //初始化K线图表
                    let chart = this.$echarts.init(document.getElementById(this.riskPositionOpt[riskPositionIndex].id));
                    let transformData = JSON.parse(JSON.stringify(res[riskPositionIndex]));
                    let chartData = this.transformKLineChartData(transformData);

                    //初始化K线图表配置
                    this.kLineChartOption.title.text = this.riskPositionOpt[riskPositionIndex].riskPosition;
                    this.kLineChartOption.legend.data[0] = '日K';
                    this.kLineChartOption.series[0].name = '日K';
                    this.kLineChartOption.series[0].data = chartData.values;
                    this.kLineChartOption.series[1].data = chartData.MAValue;
                    this.kLineChartOption.xAxis.data = chartData.categoryData;
                    if (this.kLineChartOption && typeof this.kLineChartOption === "object") {
                        chart.setOption(this.kLineChartOption);
                    }
                }
            })
        },
        handleSearchByYear: function (value, initValue) {
            if (!initValue) {
                this.riskPositionOpt = this.riskPosition.slice(0, 6);
            }
            Promise.all([
                this.$store.dispatch('getYearMeterList', {
                    positionId: this.riskPositionOpt[0].id,
                    year: this.filters.year
                }),
                this.$store.dispatch('getYearMeterList', {
                    positionId: this.riskPositionOpt[1].id,
                    year: this.filters.year
                }),
                this.$store.dispatch('getYearMeterList', {
                    positionId: this.riskPositionOpt[2].id,
                    year: this.filters.year
                }),
                this.$store.dispatch('getYearMeterList', {
                    positionId: this.riskPositionOpt[3].id,
                    year: this.filters.year
                }),
                this.$store.dispatch('getYearMeterList', {
                    positionId: this.riskPositionOpt[4].id,
                    year: this.filters.year
                }),
                this.$store.dispatch('getYearMeterList', {
                    positionId: this.riskPositionOpt[5].id,
                    year: this.filters.year
                })
            ]).then(res => {

                for (let riskPositionIndex in this.riskPositionOpt) {
                    //初始化K线图表
                    let chart = this.$echarts.init(document.getElementById(this.riskPositionOpt[riskPositionIndex].id));
                    let transformData = JSON.parse(JSON.stringify(res[riskPositionIndex]));
                    let chartData = this.transformKLineChartData(transformData);

                    //初始化K线图表配置
                    this.kLineChartOption.title.text = this.riskPositionOpt[riskPositionIndex].riskPosition;
                    this.kLineChartOption.legend.data[0] = '月K';
                    this.kLineChartOption.series[0].name = '月K';
                    this.kLineChartOption.series[0].data = chartData.values;
                    this.kLineChartOption.series[1].data = chartData.MAValue;
                    this.kLineChartOption.xAxis.data = chartData.categoryData;
                    if (this.kLineChartOption && typeof this.kLineChartOption === "object") {
                        chart.setOption(this.kLineChartOption);
                    }
                }
            })

        },
        transformKLineChartData: function (rawData) {
            let categoryData = [];
            let values = []
            let MAValue = []
            for (let i = 0; i < rawData.length; i++) {
                categoryData.push(rawData[i].splice(0, 1)[0]);
                MAValue.push(rawData[i].splice(rawData[i].length - 1, 1)[0]);
                values.push(rawData[i])
            }
            return {
                categoryData: categoryData,
                values: values,
                MAValue: MAValue
            };
        },
        initKLineChartOption: function () {
            this.kLineChartOption = {
                title: {
                    text: '',
                    left: 0,
                    top: 24,
                    textStyle: {
                        color: '#fff',//坐标值得具体的颜色
                        fontSize: 10
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    top: 22,
                    data: [this.legendK, '平均值'],
                    textStyle: {
                        color: '#fff',//坐标值得具体的颜色

                    }
                },
                grid: {
                    left: '6%',
                    right: '6%',
                    bottom: '15%'
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    scale: true,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    },
                    boundaryGap: true,
                    axisLine: {onZero: false},
                    splitLine: {show: false},
                    splitNumber: 20,
                    min: 'dataMin',
                    max: 'dataMax'
                },
                yAxis: {
                    scale: true,
                    splitArea: {
                        show: true
                    },
                    min: 0,
                    max: 99,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    },
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100
                    },
                    {
                        show: true,
                        type: 'slider',
                        top: '90%',
                        start: 0,
                        end: 100,
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'candlestick',
                        data: [],
                        dimensions: [null, '开始值', '结束值', '最低值', '最高值'],
                        encode: {
                            x: 0,
                            y: [1, 2, 3, 4],
                            tooltip: [1, 2, 3, 4]
                        },
                        itemStyle: {
                            color: '#ec0000',
                            color0: '#00da3c',
                            borderColor: '#8A0000',
                            borderColor0: '#008F28'
                        }
                    },
                    {
                        name: '平均值',
                        type: 'line',
                        data: [],
                        smooth: true,
                        lineStyle: {
                            opacity: 0.5
                        }
                    }

                ]
            };
        },
        initLineChartOption: function () {
            this.lineChartOption = {
                title: {
                    text: '',
                    left: 0,
                    top: 24,
                    textStyle: {
                        color: '#fff',//坐标值得具体的颜色
                        fontSize: 10
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 99,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    },
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100
                    },
                    {
                        show: true,
                        type: 'slider',
                        top: '90%',
                        start: 0,
                        end: 100,
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    }
                ],
                series: [{
                    data: [],
                    type: 'line',
                    smooth: true
                }]
            };
        },
    }
}
